---
title: "Grid Auto Columns"
description: "Utilities for controlling the size of implicitly-created grid columns."
---

import plugin from 'tailwindcss/lib/plugins/gridAutoColumns'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Usage

Use the `auto-cols-{size}` utilities to control the size of implicitly-created grid columns.

```html
<div class="grid grid-flow-col **auto-cols-max**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

## Responsive

To control the grid-auto-columns property at a specific breakpoint, add a `{screen}:` prefix to any existing grid-auto-columns utility. For example, use `md:auto-cols-min` to apply the `auto-cols-min` utility at only medium screen sizes and above.

```html
<div class="grid grid-flow-col auto-cols-max **md:auto-cols-min**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

By default, Tailwind includes four general purpose grid-auto-columns utilities. You can customize these in the `theme.gridAutoColumns` section of your `tailwind.config.js` file.

```js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridAutoColumns: {
          '2fr': 'minmax(0, 2fr)',
        }
      }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="gridAutoColumns" name="grid-auto-columns" />

### Disabling

<Disabling plugin="gridAutoColumns" name="grid-auto-columns" />
